<script lang="ts">
import { defineComponent, h, renderSlot, useSlots } from "vue";

/**
 * 优先级：setup返回的render函数 > template节点 > render函数 > template选项（需要runtime compilation支持)
 */
export default defineComponent({
  // template: `
  //   <div style="border: 1px solid red">defineComponent template option</div>
  // `,
  render() {
    const slots = useSlots();
    console.log();

    return h(
      "div",
      {
        style: {
          border: "10px solid yellow",
        },
      },
      [h("span", "123"), slots.default?.(), slots.suffix?.()]
    );
  },
  // setup() {
  //   const slots = useSlots();
  //   console.log(slots);
  //   return () =>
  //     h(
  //       "div",
  //       {
  //         style: {
  //           border: "1px solid red",
  //         },
  //       },
  //       slots
  //     );
  // },
});
</script>

<!-- <template>
  <div :style="{ border: '1px solid red', marginTop: '1rem' }">
    sfc template
    <slot></slot>
  </div>
</template> -->
